<template>
    <div class="app-container">
        <!-- <PageHeader :border="false" title="法警负责人审批"/> -->
        <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
            <el-row>
                <el-col :span="8" v-if="activeTab == 'PoliceAppl'">
                    <el-form-item label="办案部门名称" label-width="100px">
                        <el-input v-model="queryParams.depname" clearable @change="getLists"
                        @keydown.enter.prevent="getLists" style="width:300px"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="activeTab == 'BAApply' || activeTab == 'ZZApply' || activeTab == 'ZJApply'">
                    <el-form-item label="办案部门名称" label-width="100px">
                        <el-input v-model="queryParamsApply.depname" clearable @change="getLists"
                        @keydown.enter.prevent="getLists" style="width:300px"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="activeTab == 'OrderPoliceApply'">
                    <el-form-item label="调警单位" label-width="100px">
                        <el-tree-select
                            v-model="queryParamsOrder.orderUnitId"
                            :data="UnitOptions"
                            default-expand-all
                            :props="{ value: 'id', label: 'label', children: 'children' }"
                            value-key="id"
                            placeholder="选择单位"
                            check-strictly
                            clearable
                            @change="getLists"
                            style="width:300px"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="activeTab == 'OrderPoliceApply'">
                    <el-form-item label="被调警单位" label-width="100px">
                        <el-tree-select
                            v-model="queryParamsOrder.fromUnitId"
                            :data="UnitOptions"
                            default-expand-all
                            :props="{ value: 'id', label: 'label', children: 'children' }"
                            value-key="id"
                            placeholder="选择单位"
                            check-strictly
                            clearable
                            @change="getLists"
                            style="width:300px"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="activeTab == 'OrderPoliceApply'">
                    <el-form-item label="调往单位" label-width="100px">
                        <el-tree-select
                            v-model="queryParamsOrder.toUnitId"
                            :data="UnitOptions"
                            default-expand-all
                            :props="{ value: 'id', label: 'label', children: 'children' }"
                            value-key="id"
                            placeholder="选择单位"
                            check-strictly
                            clearable
                            @change="getLists"
                            style="width:300px"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="时间起止" label-width="100px">
                        <el-date-picker
                            v-model="searchTime"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="截止时间"
                            value-format="YYYY-MM-DD"
                            @change="changeDateTimerHandle"
                            style="width:300px"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用警状态" prop="state" v-if="activeTab == 'PoliceAppl'" label-width="100px">
                        <el-select v-model="queryParams.state" clearable 
                        style="width:300px"
                            @change="getLists">
                            <el-option label="全部" value="99" key="99"/>
                            <el-option v-for="item in nj_policeapply_status" 
                                :key="item.value" 
                                :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="办案区使用申请状态" 
                    prop="state" 
                    label-width="140px" 
                    v-if="activeTab == 'BAApply' || activeTab == 'ZZApply' || activeTab == 'ZJApply'"
                    >
                        <el-select v-model="queryParamsApply.state" clearable 
                        style="width:300px"
                            @change="getLists">
                            <el-option label="全部" value="99" />
                            <el-option v-for="item in nj_apply_status" 
                                :key="item.value" 
                                :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="调警令状态" prop="state" label-width="100px" v-if="activeTab == 'OrderPoliceApply'">
                        <el-select v-model="queryParamsOrder.state" clearable 
                        style="width:300px"
                            @change="getLists">
                            <el-option label="全部" value="99" />
                            <el-option v-for="item in nj_orderpolice_status" 
                                :key="item.value" 
                                :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="getLists">
                            <el-icon class="me-1">
                                <Search/>
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh/>
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs type="border-card" v-model="activeTab" @tab-change="tabclick">
            <el-tab-pane name="PoliceAppl">
                <template #label>
                    <el-badge v-if="depListTotalObj.policeApply > 0 && (queryParams.state == '99' || queryParams.state == '1' || queryParams.state == '3' || queryParams.state == null)" 
                        :value="depListTotalObj.policeApply" 
                        class="item" 
                        :offset="[6, 2]">
                    用警申请
                    </el-badge>
                    <span v-else>用警申请</span>
                </template>
                <PoliAppl ref="PoliceApplRef" @backtotal="backtotals" />
            </el-tab-pane>
            <el-tab-pane name="BAApply">
                <template #label>
                    <el-badge v-if="depListTotalObj.jwApplyCenter > 0 && (queryParamsApply.state == '99' || queryParamsApply.state == '1' || queryParamsApply.state == null)" 
                        :value="depListTotalObj.jwApplyCenter" 
                        class="item" 
                        :offset="[6, 2]">
                        办案中心使用申请
                    </el-badge>
                    <span v-else>办案中心使用申请</span>
                </template>
                <BAAApprove ref="BAAApproveRef" @backtotal="backtotalsApply" />
            </el-tab-pane>
            <el-tab-pane name="ZZApply">
                <template #label>
                    <el-badge v-if="depListTotalObj.jwApplyArea > 0 && (queryParamsApply.state == '99' || queryParamsApply.state == '1' || queryParamsApply.state == null)" 
                        :value="depListTotalObj.jwApplyArea" 
                        class="item" 
                        :offset="[6, 2]">
                        自侦办案区使用申请
                    </el-badge>
                    <span v-else>自侦办案区使用申请</span>
                </template>
                <ZZApprove ref="ZZApproveRef" @backtotal="backtotalsApply" />
            </el-tab-pane>
            <el-tab-pane name="ZJApply">
                <template #label>
                    <el-badge v-if="depListTotalObj.jwApplyPlace > 0 && (queryParamsApply.state == '99' || queryParamsApply.state == '1' || queryParamsApply.state == null)" 
                        :value="depListTotalObj.jwApplyPlace" 
                        class="item" 
                        :offset="[6, 2]">
                        指定居所使用申请
                    </el-badge>
                    <span v-else>指定居所使用申请</span>
                </template>
                <ZJApprove ref="ZJApproveRef" @backtotal="backtotalsApply" />
            </el-tab-pane>
            <el-tab-pane name="OrderPoliceApply">
                <template #label>
                    <el-badge v-if="depListTotalObj.JwOrderPolice > 0 && (queryParamsOrder.state == '99' || queryParamsOrder.state == '0' || queryParamsOrder.state == null || queryParamsOrder.state == '2')" 
                        :value="depListTotalObj.JwOrderPolice" 
                        class="item" 
                        :offset="[6, 2]">
                        调警令
                    </el-badge>
                    <span v-else>调警令</span>
                </template>
                <OrderPoliceApprove ref="OrderPoliceApproveRef" @backtotal="backtotalsOrder" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance();
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router';
import PoliAppl from "./PoliceApply/PoliceApply.vue";
import ZZApprove from "./ZZApprove/ZZApprove.vue";
import BAAApprove from "./BAAApprove/BAAApprove.vue";
import ZJApprove from "./ZJApprove/ZJApprove.vue";
import OrderPoliceApprove from "./OrderPoliceApprove/OrderPoliceApprove.vue";
import {deptTreeSelectPost} from "@/api/system/user.js";
import {PoliceApplydepListTotal} from "@/api/UserPoliAppl/UserPoliAppl";
const { nj_policeapply_status,nj_apply_status ,nj_orderpolice_status} = proxy.useDict('nj_policeapply_status','nj_apply_status','nj_orderpolice_status')
const queryParamsRef = ref()

const route = useRoute();

const UnitOptions = ref([])
const PoliceApplRef = ref({})
const ZZApproveRef = ref({})
const BAAApproveRef = ref({})
const ZJApproveRef = ref({})
const depListTotalObj = ref({})
const OrderPoliceApproveRef = ref({})

const num = ref(null)

const queryParams = ref({
    depname:'',
    state:null
})
const queryParamsApply = ref({
    depname:'',
    state:null
})
const queryParamsOrder = ref({
    state:null
})
const searchTime = ref([])
const activeTab = ref('PoliceAppl'); // 默认选中的tab

onMounted(() => {
    nextTick(() => {
        if (route.query.tag) {
        switch (Number(route.query.tag)) {
            case 1:
            activeTab.value = 'PoliceAppl'
            break;
        case 2:
            activeTab.value = 'BAApply'
            break;
        case 3:
            activeTab.value = 'ZZApply'
            break;
        case 4:
            activeTab.value = 'ZJApply'
            break;
        case 5:
            activeTab.value = 'OrderPoliceApply'
            break;
        default:
        ElMessage.error('索引无效');
      }
    } 
    getLists()
    getDeptTree()
    })
})
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
    await deptTreeSelectPost({isUnit: true}).then(res => {
        UnitOptions.value  = res.data
    })
}
// 获取待办事宜标签
const getPoliceApplydepListTotals = async () => {
    await PoliceApplydepListTotal().then(res => {
        depListTotalObj.value = res.data
    })
}

// 获取列表
const getLists = async () => {
    // getPoliceApplydepListTotals()
    tabclick(activeTab.value)
}
// 子组件返回的total-用警申请
const backtotals = async (value) => {
    if( queryParams.value.state === '1,3' || queryParams.value.state === '1' || queryParams.value.state === '3'){
        depListTotalObj.value.policeApply = value 
    } else{
        getPoliceApplydepListTotals()
    }
}
// 子组件返回的total-办案中心使用申请
const backtotalsApply = async (value) => {
    if(queryParamsApply.value === '1' ){
        if(activeTab.value == "BAApply"){
        depListTotalObj.value.jwApplyCenter = value
        }
        if(activeTab.value == "ZZApply"){
            depListTotalObj.value.jwApplyArea = value
        }
        if(activeTab.value == "ZJApply"){
            depListTotalObj.value.jwApplyPlace = value
        }
    }else{
        getPoliceApplydepListTotals()
    }
}
// 子组件返回的total-调警令
const backtotalsOrder = async (value) => {
    if( queryParamsOrder.value.state === '0,2' || queryParamsOrder.value.state === '0' || queryParamsOrder.value.state === '2'){
        depListTotalObj.value.JwOrderPolice = value
    } else{
        getPoliceApplydepListTotals()
    }
    
}
// tab 切换事件
const tabclick = (tab) => {
    if(tab == "PoliceAppl"){
        queryParamsApply.value.state = null
        queryParamsOrder.value.state = null
        PoliceApplRef.value.showPoliceApply(queryParams.value) 
    }
    if(tab == "BAApply"){
        queryParams.value.state = null
        queryParamsOrder.value.state = null
        BAAApproveRef.value.showBAAApply(queryParamsApply.value) 
    }
    if(tab == "ZZApply"){
        queryParams.value.state = null
        queryParamsOrder.value.state = null
        ZZApproveRef.value.showZZAprove(queryParamsApply.value) 
    }
    if(tab == "ZJApply"){
        queryParams.value.state = null
        queryParamsOrder.value.state = null
        ZJApproveRef.value.showZJAprove(queryParamsApply.value) 
    }
    if(tab == "OrderPoliceApply"){
        queryParams.value.state = null
        queryParamsApply.value.state = null
        queryParamsOrder.value.params = queryParams.value.params
        OrderPoliceApproveRef.value.showOrderPoliceApply(queryParamsOrder.value) 
    }
};
// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    tabclick(activeTab.value)
}

// 重置搜索调解
const handleRest = (formEl) => {
    queryParams.value = {}
    queryParamsOrder.value = {}
    tabclick(activeTab.value)
}
</script>

<style scoped>
:deep() .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #44498f; /* 修改为你想要的红色 */
    color:white
}

:deep() .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #44498f; /* 修改为你想要的红色 */
    color:white
}
</style>